import React from 'react';
import styles from './index.less';
import { connect, history, Helmet } from 'umi';
import IconFont from '@basicComp/IconFont';
import commonPkg from '@/utils/commonPkg';
import Avatar from '@/components/antdPro/GlobalHeader/AvatarDropdown';
import IconButton from '@basicComp/IconButton';
import HeaderCont from '@/layouts/MenuLayout/components/HeaderCont';

const { images } = commonPkg;

const menuList = [
  {
    img: require('./img/dataSource.png'),
    title: '数据源',
    msg: '数据采集，清洗，结构化，业务数据高保真，集成沉淀。',
    linkto: '/dataSource',
  },
  {
    img: require('./img/metadata.png'),
    title: '元数据',
    msg: '展示数据结构，数据集的名称、关系、字段、约束等，数据集的物理位置',
    linkto: '/userConf',
  },
  {
    img: require('./img/dataAssembly.png'),
    title: '数据集成',
    msg:
      '基于DataGo构建的简单高效的数据同步平台，致力于提供具有强大的数据预处理能力、丰富的异构数据源之间数据高速稳定的同步能力',
    linkto: '/userConf',
  },
  {
    img: require('./img/dataDev.png'),
    title: '数据开发',
    msg: '通过编写代码的方式构建复杂的数据模型，构建不同类型的代码任务',
    linkto: '/userConf',
  },
  {
    img: require('./img/dataQuality.png'),
    title: '数据质量',
    msg:
      '基于DataGo平台，为您提供全链路的数据质量方案，包括质量规则配置、质量监控、智能报警等功能。',
    linkto: '/userConf',
  },
  {
    img: require('./img/dataServe.png'),
    title: '数据服务',
    msg:
      '提供快速将数据表生成API的能力，同时支持您快速注册现有的API至数据服务平台，进行统一的管理和发布',
    linkto: '/userConf',
  },
  {
    img: require('./img/operations.png'),
    title: '运维监控',
    msg:
      '展示您已提交或发布的任务，同时支持对任务及任务生成的实例进行运维管理，包括任务运维和实例运维',
    linkto: '/userConf',
  },
  {
    img: require('./img/userConf.png'),
    title: '用户管理',
    msg:
      '系统管理员需要通过用户管理来进行用户管理和权限设置，以提高数据构建的安全性',
    linkto: '/userConf',
  },
];

@connect(({}) => ({}))
export default class extends React.Component {
  render() {

    return (
      <div className={styles.pageRoot}>
        <div className={styles.header}>
          <div className={styles.left}>
            <img
              className={styles.logoIcon}
              src={images.logoIcon}
              onClick={() => {
                history.push({
                  pathname: '/home',
                });
              }}
            />
            <div>
              <HeaderCont />
            </div>
          </div>
          <div className={styles.right}>
            <Avatar menu />
          </div>
        </div>

        <div className={styles.content}>
          <div className={styles.left}>
            <div className={styles.leftChild}>
            <img src={require('./img/animation.gif')} />
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.scroll}>
              {menuList.map((item, i) => {
                return (
                  <div
                    className={styles.item}
                    onClick={() => {
                      history.push({
                        pathname: item.linkto,
                        query: { ...history.location.query },
                      });
                    }}
                  >
                    <div className={styles.bg}></div>
                    <div className={styles.itemCont}>
                      <img src={item.img} />
                      <div className={styles.itemRight}>
                        <div className={styles.title}>{item.title}</div>
                        <div className={styles.text}>{item.msg}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
